Page({
  // 微信小程序中所需的数据均来自 data对象
  data: {
    name: "张三",
    id: 1,
    obj: {
      age: 18,
      sex: "男",
    },
    checked: true,
    num: 1,
    userInfo: {
      name: "王麻子",
      age: 18,
      test: 111,
    },
    list: [1, 2, 3],
    // list: [{ id: 1, name: "李四" }],
    fruitList: [
      {
        id: 1,
        name: "苹果",
        price: 19.9,
      },
      {
        id: 2,
        name: "柠檬",
        price: 9.9,
      },
      {
        id: 3,
        name: "西瓜",
        price: 0.9,
      },
    ],
    hidden: true,
  },
  // 更新基本数据类型
  updateNum() {
    // 获取数据 通过this.data获取
    console.log(this.data.num);
    // 通过赋值的方式修改数据(可以修改数据，但不能更新视图)
    // this.data.num += 1;
    // console.log(this.data.num);
    // 使用this.setData({key:value}) 修改数据并更新视图
    this.setData({
      // key: 要更新的数据  value：是最新的值
      num: this.data.num + 1,
    });
  },
  // 更新对象类型数据
  updateUserInfo() {
    // 1.新增单个/多个属性
    /* this.setData({
      // 如果是给对象新增属性可以将key写成数据路径的方式 a.b.c
      "userInfo.name": "王麻子",
      "userInfo.age": 18,
    }); */
    // 2.修改单个 / 多个属性 key使用数据路径的方式
    /* this.setData({
      "userInfo.name": "王二狗",
      "userInfo.age": 20,
    }); */
    // 3.优化新增/修改 使用ES6展开运算符进行优化
    // 通过展开运算符能将对象中的属性赋值给另一个对象，后面的属性会覆盖前面的属性
    /* const userInfo = {
      ...this.data.userInfo,
      name: "王二狗", // 后面的属性会覆盖前面展开的属性
      age: 20,
    };
    this.setData({
      userInfo, // 键值同名简写
    }); */
    // 使用Object.assign()方法进行数据进行合并，并返回合并后的数据
    /* const newUserInfo = Object.assign(this.data.userInfo, {
      name: "王二狗",
      age: "20",
    });
    this.setData({
      userInfo: newUserInfo,
    }); */
    // 4.删除单个属性
    /* delete this.data.userInfo.age; // data中的数据被删除但不驱动视图更新
    this.setData({
      userInfo: this.data.userInfo, // 将删除后的数据赋值给userInfo实现视图更新
    }); */
    // 5.删除多个属性  使用解构+rest(剩余参数)
    const { age, test, ...rest } = this.data.userInfo;
    this.setData({
      userInfo: rest,
    });
  },
  // 更新数组类型数据
  updateList() {
    // 1.新增数组元素
    // 方式一
    /* this.data.list.push(4); // 可以修改data中的数据但不能更新视图
    this.setData({
      list: this.data.list, // 此时data中的数据已被修改
    }); */
    // 方式二
    /* const newList = this.data.list.concat(4);
    this.setData({
      list: newList,
    }); */
    // 方式三
    /* const newList = [...this.data.list, 4];
    this.setData({
      list: newList,
    }); */
    // 2.修改数组元素
    // this.setData({
    //   "list[1]": 6, // 使用数据路径进行修改
    // });
    /* this.setData({
      list: [6, 6, 6],
    }); */
    /* this.setData({
      "list[0].name": "Tom",
    }); */
    // 3.删除数组元素
    // 方式一
    /* this.data.list.splice(1, 1); // 只修改data中的数据不更新视图
    this.setData({
      list: this.data.list,
    }); */
    // 方式二
    const newList = this.data.list.filter((item) => {
      return item != 2;
    });
    this.setData({
      list: newList,
    });
  },
  // num+1
  addNum() {
    this.setData({
      num: this.data.num + 1,
    });
  },
});
